import React from 'react'
import { Menu } from 'antd'
import styles from './SideMenu.module.css'
import { sideMenuList } from './mockup'
import { GifOutlined } from '@ant-design/icons'


const SideMenu: React.FC = () => {
    return (
        <div>
            <Menu mode="vertical" className={styles["side-menu"]}>
                {
                    sideMenuList.map((item, index) => {
                        return (
                            <Menu.SubMenu
                                key={`side-menu-${index}`}
                                title={<span><GifOutlined />{item.title}</span>}
                            >
                                {
                                    item.subMenu.map((sitem, sindex) => {
                                        return (
                                            <Menu.SubMenu
                                                key={`side-menu-${sindex}`}
                                                title={<span><GifOutlined />{sitem.title}</span>}
                                            >
                                                {
                                                    sitem.subMenu.map((ssitem, ssindex) => {
                                                        return (
                                                            <Menu.Item
                                                                key={`side-menu-${ssindex}`}
                                                            >
                                                                <span><GifOutlined />{ssitem}</span>
                                                            </Menu.Item>
                                                        )
                                                    })
                                                }
                                            </Menu.SubMenu>
                                        )
                                    })
                                }
                            </Menu.SubMenu>
                        )
                    })
                }
            </Menu>
        </div>
    )
}

export default SideMenu